import { withRouter } from "react-router";
import { Component } from "refast";
import logic from "./logic";
import dialogLogic from "./dialogLogic";
import "./PageXmzx.less";
import Grid from "uxcore-grid";
import { Row, Col } from "uxcore-grid";
import tsIcon from "./../../images/dhico_1.png";
import ztbIcon from "./../../images/dhico_2.png";
import jgjsbaIcon from "./../../images/dhico_3.png";
import sgxkIcon from "./../../images/dhico_4.png";
import wgclIcon from "./../../images/dhico_5.png";
import ReactEcharts from "echarts-for-react";

import SSKJDialog from "./../../components/dialog";
import TsTjDialog from "./../../components/sjtj/ts";

class PageXmzx extends Component {
  constructor(props) {
    super(props, [logic, dialogLogic]);
  }

  componentWillMount() {
    this.dispatch("eq");
    this.dispatch("ts");
    this.dispatch("ztb");
    this.dispatch("sght");
    this.dispatch("wg");
    this.dispatch("xkz");
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (
      Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length
    ) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  onDialogOk() {
    this.dispatch("onDialogOk");
  }

  onDialogCancel() {
    this.dispatch("onDialogCancel");
  }

  onTsContentClick() {
    this.dispatch("onTsContentClick");
  }

  getWGAllNum() {
    let a = 0;

    this.state.wgOption.series.map((kv) => {
      kv.data.map((skv) => {
        a += parseInt(skv);
      });
    });

    return a;
  }

  render() {
    console.log(this.state);
    return (
      <div className="page-xmzx">
        <Grid fluid={true}>
          <Row className="show-grid">
            <Col xs={24} md={24}>
              <div className="col-md-26 dh">
                <div className="dh_top" style={{ marginLeft: "-4px" }}>
                  <div className="dh_top_1">
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.ts.n}
                      </div>
                      <div className="col-md-24">新增</div>
                    </div>
                    <div className="col-md-8">
                      <img src={tsIcon} className="dhico_1" />
                    </div>
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {parseInt(this.state.ts.ywc) + parseInt(this.state.ts.clz)}
                      </div>
                      <div className="col-md-24">所有</div>
                    </div>
                  </div>
                  <div className="dh_top_2">
                    <div className="col-md-24">图 审</div>
                  </div>
                </div>

                <div className="dh_top">
                  <div className="dh_top_1">
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.ztb.n}
                      </div>
                      <div className="col-md-24">新增</div>
                    </div>
                    <div className="col-md-8">
                      <img src={ztbIcon} className="dhico_2" />
                    </div>
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.ztb.a}
                      </div>
                      <div className="col-md-24">所有</div>
                    </div>
                  </div>
                  <div className="dh_top_2">
                    <div className="col-md-24">招投标</div>
                  </div>
                </div>

                <div className="dh_top">
                  <div className="dh_top_1">
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.xkz.n}
                      </div>
                      <div className="col-md-24">新增</div>
                    </div>
                    <div className="col-md-8">
                      <img src={sgxkIcon} className="dhico_3" />
                    </div>
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.xkz.a}
                      </div>
                      <div className="col-md-24">所有</div>
                    </div>
                  </div>
                  <div className="dh_top_2">
                    <div className="col-md-24">施工许可证</div>
                  </div>
                </div>

                <div className="dh_top">
                  <div className="dh_top_1">
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.wg.n}
                      </div>
                      <div className="col-md-24">新增</div>
                    </div>
                    <div className="col-md-8">
                      <img src={wgclIcon} className="dhico_4" />
                    </div>
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.wg.a}
                      </div>
                      <div className="col-md-24">所有</div>
                    </div>
                  </div>
                  <div className="dh_top_2">
                    <div className="col-md-24">违规处理</div>
                  </div>
                </div>

                <div className="dh_top" style={{ marginRight: "-4px" }}>
                  <div className="dh_top_1">
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.sght.n}
                      </div>
                      <div className="col-md-24">新增</div>
                    </div>
                    <div className="col-md-8">
                      <img src={jgjsbaIcon} className="dhico_5" />
                    </div>
                    <div className="col-md-8">
                      <div className="col-md-24 dh_top_n">
                        {this.state.eq.sght.a}
                      </div>
                      <div className="col-md-24">所有</div>
                    </div>
                  </div>
                  <div className="dh_top_2">
                    <div className="col-md-24">竣工结算备案</div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={12} md={7}>
              <div
                className="col_1"
                style={{ height: 257 }}
                onClick={() => {
                  // this.onTsContentClick();
                }}
              >
                <h2 className="title_top">图审基础数据</h2>
                <div className="col-md-24">
                  <div className="col-md-12 tushen_l">
                    <div className="col-md-12 tushen_l_1">处理中</div>
                  </div>
                  <div className="col-md-12 tushen_r">
                    <div className="tushen_r_1">{this.state.ts.clz}</div>
                  </div>
                </div>
                <div className="col-md-24 tushen_fg">
                  <div className="col-md-12 tushen_l">
                    <div className="col-md-12 tushen_l_1">办理完毕</div>
                  </div>
                  <div className="col-md-12 tushen_r">
                    <div className="tushen_r_1">{this.state.ts.ywc}</div>
                  </div>
                </div>
              </div>
            </Col>
            <Col xs={12} md={10}>
              <div className="col_1" style={{ height: 257 }}>
                <h2 className="title_top">招投标数据</h2>
                <ReactEcharts option={this.state.ztbOption} />
              </div>
            </Col>
            <Col xs={12} md={7}>
              <div className="col_1" style={{ height: 257 }}>
                <h2 className="title_top">施工许可数据分类</h2>
                <ReactEcharts option={this.state.sgxkOption} />
              </div>
            </Col>
          </Row>
          <Row className="show-grid">
            <Col xs={24} md={24}>
              <div className="col_1" style={{ height: 259 }}>
                <h2 className="title_top">违规处理数据分类</h2>
                <ReactEcharts option={this.state.wgOption} />
              </div>
            </Col>
          </Row>
        </Grid>

        <SSKJDialog
          title={this.state.title}
          width={this.state.width}
          height={this.state.height}
          visible={this.state.visible}
          onOk={() => {
            this.onDialogOk();
          }}
          onCancel={() => {
            this.onDialogCancel();
          }}
          content={<TsTjDialog />}
        ></SSKJDialog>
      </div>
    );
  }
}

export default withRouter(PageXmzx);
